Lab 2 - Bootstrap, JavaScript and Forms

COMP7270/7980 - Web and Mobile Programming - HKBU - Spring2025

Today, we will introduce the popular Bootstrap frontend framework, and explore how it can be used to create visually appealing and responsive web designs. Additionally, we will dive into some interactive features that can be implemented using JavaScript. Finally, we will develop an HTML form to collect user data.

Responsive Web Design

Responsive Web Design (RWD) is a design approach that aims to create websites that provide an optimal viewing and interaction experience across a wide range of devices, from desktop computers to mobile phones. This is achieved by designing sites that are easy to read and navigate, with minimal need for resizing, panning, and scrolling.

Bootstrap

Bootstrap is a popular and widely-used collection of tools for creating websites and web applications. It includes a variety of HTML- and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. The goal of Bootstrap is to simplify and streamline the development of dynamic and responsive websites and web applications.

The official homepage of Bootstrap: https://getbootstrap.com

Most modern web browsers come with built-in tools that allow you to preview web pages on different devices. For example, in Safari, you can visit the "Develop" tab and click "Enter Responsive Design Mode". This will give you the abililty to adjust the screen width.

Screenshot 2024-01-24 at 7.49.52 AM.png

To preview web pages on different devices in Chrome, click on the "customize and control" button and select "More Tools", then choose "Developer Tools". This will open the Developer Tools panel. From there, you can toggle the "devices toolbar" if it's not already shown.

Screenshot 2024-01-24 at 7.50.45 AM.png

Revisiting the Calendar

To begin, create a new folder on your desktop called lab02. Inside this folder, create a new HTML file named lab02.html and start it with the Bootstrap starter template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

The first meta tag specifies the character encoding used in the document. In this case, we are using the UTF-8 character set, which is capable of representing a wide range of languages, including traditional and simplified Chinese, among others.

The second meta tag defines the viewport properties for a web page. It affects how the web page is displayed on different devices, particularly on mobile devices, making the web page more responsive and adaptable to different screen sizes and resolutions.

The HTML file also includes pre-compiled Bootstrap CSS and JavaScript files for styling and interactivity.

To view the HTML file in a web browser, we can use a tool such as Live Server to render the page for us. This allows us to see the page as it would appear to users when it is published online.

The Bootstrap Grid System

Bootstrap's grid system relies on a combination of containers, rows, and columns to help layout and align content on a web page. This grid system is fully responsive, making it easy to create dynamic and responsive web designs.

To start using the Bootstrap grid system, you can create a Bootstrap container using the .container class. This will automatically adjust the width of the container based on the current device size, and add margins on both sides of the container. You can also use the .my-4 class to add vertical margins on both the top and bottom of the container.

<div class="container my-4">
  <!-- Content here -->
</div>
<div class="container my-4">
  <!-- Content here -->
</div>

Inside the container, you can start developing your web page layout using Bootstrap's grid system. This involves creating rows and columns that are sized and positioned using predefined Bootstrap classes:

<div class="row">
    <div class="col card">
        &nbsp;
    </div>
    <div class="col card">
        1
    </div>
    <div class="col card">
        2
    </div>
    <div class="col card">
        3
    </div>
    <div class="col card">
        4
    </div>
    <div class="col card">
        5
    </div>
    <div class="col card">
        6
    </div>
</div>
<div class="row">
    <div class="col card">
        &nbsp;
    </div>
    <div class="col card">
        1
    </div>
    <div class="col card">
        2
    </div>
    <div class="col card">
        3
    </div>
    <div class="col card">
        4
    </div>
    <div class="col card">
        5
    </div>
    <div class="col card">
        6
    </div>
</div>

To create a row using the Bootstrap grid system, you can use the .row class. Bootstrap columns (.col) should then be added as direct children of the row, and the space of the row will be evenly distributed among the columns.

Screenshot 2024-01-24 at 8.00.42 AM.png

We have also added the .card class to each column to create Bootstrap cards, which have a rounded border and make it easier to distinguish between the columns.

Responsiveness

The Bootstrap grid system provides support for six responsive breakpoints, which represent a subset of common device sizes and viewport dimensions. These breakpoints are shown in the image below:

Screenshot 2022-08-21 at 9.10.42 PM.png

For example, the Extra small breakpoint represents mobile phones in portrait mode, while the Medium breakpoint corresponds to a portrait mobile tablet.

The grid system allows for up to 12 template columns per row, allowing for different combinations of elements that span any number of columns. By default, columns are evenly distributed across the available width of the parent row element.

However, when viewing your columns on a mobile device, each column may appear too small. To address this, you can use the .col-12 class to ensure that each column occupies all 12 template columns when being viewed on a portrait mobile phone, as shown in the image below:

Screenshot 2024-01-24 at 8.03.57 AM.png

Here, the first cell could be hidden as it doesn't hold any value. To hide it only on mobile phones, we can replace the classname card with d-none d-md-block for the first element, ensuring it will be removed only when rendered on mobile devices.

Screenshot 2024-01-24 at 8.13.01 AM.png

For larger screens, you can add the .col-md class to allow each column to claim an equal share of its parent row element. This will ensure that the columns are still visible and easily readable on a larger device like tablet.

Screenshot 2024-01-24 at 10.14.25 AM.png

For more information on using Bootstrap columns and the grid system, you can check out the following resource: https://getbootstrap.com/docs/5.3/layout/columns/.

JavaScript

Instead of hardcoding the dates on our calendar, we can utilize a programming language to dynamically generate the numbers.

To achieve this, let's add more empty rows to our page:

<div class="row" id="week2"></div>
<div class="row" id="week3"></div>
<div class="row" id="week4"></div>
<div class="row" id="week5"></div>
<div class="row" id="week2"></div>
<div class="row" id="week3"></div>
<div class="row" id="week4"></div>
<div class="row" id="week5"></div>

These additional rows provide space to dynamically populate the calendar dates using JavaScript.

Accessing an HTML element & InnerHTML

To display the cells in week 2, you can add the following <script> tag before the closing </body> tag:

<script>
    document.getElementById("week2").innerHTML = `
        <div class="col-12 col-md card text-danger">
            7
        </div>
        <div class="col-12 col-md card">
            8
        </div>
        <div class="col-12 col-md card">
            9
        </div>
        <div class="col-12 col-md card">
            10
        </div>
        <div class="col-12 col-md card">
            11
        </div>
        <div class="col-12 col-md card">
            12
        </div>
        <div class="col-12 col-md card">
            13
        </div>`;
</script>
<script>
    document.getElementById("week2").innerHTML = `
        <div class="col-12 col-md card text-danger">
            7
        </div>
        <div class="col-12 col-md card">
            8
        </div>
        <div class="col-12 col-md card">
            9
        </div>
        <div class="col-12 col-md card">
            10
        </div>
        <div class="col-12 col-md card">
            11
        </div>
        <div class="col-12 col-md card">
            12
        </div>
        <div class="col-12 col-md card">
            13
        </div>`;
</script>

In this code, the document.getElementById() function is used to access the element with the specified id (week2). The innerHTML property is then used to set the inner content of that element with the provided HTML code.

Additionally, the use of the text-danger class in the first cell will color the text in red.

Dynamic Code

To dynamically construct the HTML code and generate the dates, you can use JavaScript. Here's an example of how you can generate the dates for the third week:

document.getElementById("week3").innerHTML = `
    <div class="col-12 col-md card sundays">
        14
    </div>`;

for (let i = 15; i <= 20; i++) {
    document.getElementById("week3").innerHTML += `
    <div class="col-12 col-md card">
        ${i}
    </div>`;
}   
document.getElementById("week3").innerHTML = `
    <div class="col-12 col-md card sundays">
        14
    </div>`;

for (let i = 15; i <= 20; i++) {
    document.getElementById("week3").innerHTML += `
    <div class="col-12 col-md card">
        ${i}
    </div>`;
}

In this code, the first part sets up the first cell and assigns the classname sundays to it. This can be customized according to our specific requirements.

The second part uses a for loop to iterate through a range of numbers (from 15 to 20 in this example). For each number, a cell is constructed using HTML tags, and then it is appended to the content of the week3 element using the innerHTML property.

We can apply a similar approach to generate the dates for the fourth week or any other week by modifying the iteration range and the HTML code within the loop:

for (let i = 21; i <= 27; i++) {
    if (i == 21) {
        document.getElementById("week4").innerHTML = `
            <div class="col-12 col-md card sundays">
                ${i}
            </div>`;
    } else {
        document.getElementById("week4").innerHTML += `
            <div class="col-12 col-md card">
                ${i}
            </div>`;
    }
}
for (let i = 21; i <= 27; i++) {
    if (i == 21) {
        document.getElementById("week4").innerHTML = `
            <div class="col-12 col-md card sundays">
                ${i}
            </div>`;
    } else {
        document.getElementById("week4").innerHTML += `
            <div class="col-12 col-md card">
                ${i}
            </div>`;
    }
}

In this code, a for loop is used to iterate through the numbers 21 to 27. Inside the loop, an if-else statement is used to handle the first cell (i.e., when i is 21) and subsequent cells. The HTML code for each cell is constructed using string interpolation and then appended to the content of the week4 element.

For the fifth week:

for (let i = 28; i <= 34; i++) {
    if (i == 28) {
        document.getElementById("week5").innerHTML = `
            <div class="col-12 col-md card sundays">
                ${i}
            </div>`;
    } else if (i <= 31) {
        document.getElementById("week5").innerHTML += `
            <div class="col-12 col-md card">
                ${i}
            </div>`;
    } else {
        document.getElementById("week5").innerHTML += `
            <div class="col-12 col-md d-none d-md-block">
                &nbsp;
            </div>`;
    }
}
for (let i = 28; i <= 34; i++) {
    if (i == 28) {
        document.getElementById("week5").innerHTML = `
            <div class="col-12 col-md card sundays">
                ${i}
            </div>`;
    } else if (i <= 31) {
        document.getElementById("week5").innerHTML += `
            <div class="col-12 col-md card">
                ${i}
            </div>`;
    } else {
        document.getElementById("week5").innerHTML += `
            <div class="col-12 col-md d-none d-md-block">
                &nbsp;
            </div>`;
    }
}

In this code, another for loop is used to iterate through the numbers 28 to 34. The if-else statement is used to handle the first cell (i.e., when i is 28), subsequent cells up to 31, and the remaining cells. The HTML code for each cell is constructed accordingly and appended to the content of the week5 element.

By using the if-else statements, you can handle different cases and generate the HTML code dynamically based on your desired logic or conditions.

QuerySelector and Array

Sometimes, we need to access a group of HTML elements that share a common attribute, such as an element type, class name, or style. In JavaScript, we can accomplish this using the powerful Query Selector method.

Here, we have an example of using Query Selector to select elements based on their class names:

var sundays = document.querySelectorAll(".sundays");
alert(sundays.length);

for (var sunday of sundays) {
    sunday.style.color = "firebrick";
}
var sundays = document.querySelectorAll(".sundays");
alert(sundays.length);

for (var sunday of sundays) {
    sunday.style.color = "firebrick";
}

The querySelectorAll() method understands CSS rules and uses them to select elements based on their class names. In this example, .sundays is the class name that is used to select the desired elements. The returned result of querySelectorAll() is an array-like object that we can iterate over using the for/of loop structure to access each of its elements. In this example, we can modify their style or properties using standard JavaScript syntax.

Alternatively, you can dynamically add a classname to the elements using the classList.add() method. Here's an example:

var sundays = document.querySelectorAll(".sundays");
alert(sundays.length);

for (var sunday of sundays) {
    // sunday.style.color = "firebrick";
    sunday.classList.add("text-danger");
}
var sundays = document.querySelectorAll(".sundays");
alert(sundays.length);

for (var sunday of sundays) {
    // sunday.style.color = "firebrick";
    sunday.classList.add("text-danger");
}

In this example, the classList.add("text-danger") adds the class name .text-danger to each element, causing the text color to change to red.

Interaction - Button

To add an interactive effect to your web page using JavaScript, we can create a button formatted by Bootstrap with an onclick attribute assigned to it. Here's an example of how you can create the section:

<div class="container my-4">
    <div class="row">
        <button class="col btn btn-primary" onclick="buttonClicked(this)">
            I'm a button, Click me!
        </button>
    </div>
</div>
<div class="container my-4">
    <div class="row">
        <button class="col btn btn-primary" onclick="buttonClicked(this)">
            I'm a button, Click me!
        </button>
    </div>
</div>

Details of the button format could be found on https://getbootstrap.com/docs/5.0/components/buttons/.

When the button is clicked, the buttonClicked() custom function will be called and this button is passed as the argument of this function call.

Add the following inside the <script> element:

function buttonClicked(elem) {
    console.log("console output");
    elem.innerHTML = "Don't click me!";
}
function buttonClicked(elem) {
    console.log("console output");
    elem.innerHTML = "Don't click me!";
}

Here, elem refers to the button that has been clicked, and we use the innerHTML property to replace the text content of the button.

Screenshot 2024-01-24 at 10.33.51 AM.png

To print debug messages to the console, you can use the console.log() function. This is a useful way to debug your JavaScript code and see what's going on behind the scenes.

In Safari, you can bring up the console by pressing the alt + ⌘ + c shortcut. If you don't see the console, you may need to enable the Develop menu in the Safari preferences. To do this, follow these steps:

  1. Click the Safari menu in the menu bar (the one next to the Apple icon).
  2. Choose Preferences.
  3. Click the Advanced tab.
  4. Check the box next to "Show Develop menu in menu bar".

HTML Form

HTML forms are commonly used to collect user input and can contain a variety of form elements, such as input fields, checkboxes, radio buttons, and submit buttons.

Let's create a new HTML file named index.html and start it with the Bootstrap starter template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

To create a horizontal form based on the Bootstrap this template, you can add the following code below the <h1> element in your index.html file:

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

To add some margins to the form, you can assign the container class to the <form> element

The Input Element

Text fields are used to allow users to input data, and are constructed using the input element in HTML.

To modify the second field in the form to accept the number of tickets instead of a password, you can make the following changes:

  1. Change the label text from "Password" to "Number of Tickets".
  2. Change the type attribute of the input element from password to number.
  3. Add min and max attributes to limit the number of tickets that can be selected.

Here's the updated code for the second field:

<input type="number" class="form-control" id="inputPassword3" min=1 max=4>
<input type="number" class="form-control" id="inputPassword3" min=1 max=4>

With these changes, if the user enters a number outside the permitted range, they will see the error message asking them to enter a number between 1 and 4. This provides a more informative message to the user and can help them correct their input more easily.

Checks and Radios

The input element can also be used to create radio buttons by specifying radio as the value of the type attribute. Modify this part as follows:

<fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Payment Method</legend>
    <div class="col-sm-10">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="Credit Card"
                checked>
            <label class="form-check-label" for="gridRadios1">
                Pay with Credit Card
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="Paypal">
            <label class="form-check-label" for="gridRadios2">
                Pay with Paypal
            </label>
        </div>
        <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="Octopus"
                disabled>
            <label class="form-check-label" for="gridRadios3">
                Pay with Octopus
            </label>
        </div>
    </div>
</fieldset>
<fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Payment Method</legend>
    <div class="col-sm-10">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="Credit Card"
                checked>
            <label class="form-check-label" for="gridRadios1">
                Pay with Credit Card
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="Paypal">
            <label class="form-check-label" for="gridRadios2">
                Pay with Paypal
            </label>
        </div>
        <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="Octopus"
                disabled>
            <label class="form-check-label" for="gridRadios3">
                Pay with Octopus
            </label>
        </div>
    </div>
</fieldset>

The disabled attribute can be used to disable certain input elements, preventing the user from interacting with them. Here's an example:

<div class="row mb-3">
  <label for="inputDisabled" class="col-sm-2 col-form-label">Disabled Input</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="inputDisabled" placeholder="This input is disabled" disabled>
  </div>
</div>
<div class="row mb-3">
  <label for="inputDisabled" class="col-sm-2 col-form-label">Disabled Input</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="inputDisabled" placeholder="This input is disabled" disabled>
  </div>
</div>

In this example, we've added the disabled attribute to the input element to disable it. The user will not be able to interact with this input element, and its value will not be submitted with the form.

A checkbox can also be created using the input element by specifying checkbox as its type. Let's modify the checkbox as follows:

Screenshot 2022-08-14 at 12.56.07 PM.png

Here are the supported values for the type attribute of the input element:

You can use these input types to create various types of form elements to collect different types of user input.

Buttons

A button with the type attribute set to submit is used to submit a form. Let's modify our submit button as follows:

<button type="submit" class="btn btn-primary">Buy Tickets</button>
<button type="submit" class="btn btn-primary">Buy Tickets</button>

Required Field

HTML5 provides some basic client-side validation features that can help improve the user experience by catching errors before the form is submitted to the server.

One way to validate mandatory fields is to add the required attribute to the input element. For example, to ensure that the user enters a valid email address, you can use the following code:

<input type="email" class="form-control" id="inputEmail3" required>
<input type="email" class="form-control" id="inputEmail3" required>

In this example, we've added the required attribute to the input element to indicate that this field is mandatory. If the user tries to submit the form without entering a value for this field, the browser will prevent the form from being submitted and display an error message to the user.

The Select Element

To create a pair of 2-level interdependent drop-down lists, we can use JavaScript to dynamically populate the second list based on the selection made in the first list. In the middle of our form, let's bring in the following code segment.

<div class="row mb-3">
    <label class="col-sm-2 col-form-label">Favourite Team</label>
    <select class="form-select" aria-label="Default select example" onchange="teamSelected(this.value)">
        <option value="" selected>Open this select menu</option>
        <option value="Avengers">Avengers</option>
        <option value="JLA">Justice League</option>
    </select>
</div>
<div class="row mb-3">
    <label class="col-sm-2 col-form-label">Favourite Hero</label>
    <select class="form-select" aria-label="Default select example" id="superhero" disabled>
    </select>
</div>
<div class="row mb-3">
    <label class="col-sm-2 col-form-label">Favourite Team</label>
    <select class="form-select" aria-label="Default select example" onchange="teamSelected(this.value)">
        <option value="" selected>Open this select menu</option>
        <option value="Avengers">Avengers</option>
        <option value="JLA">Justice League</option>
    </select>
</div>
<div class="row mb-3">
    <label class="col-sm-2 col-form-label">Favourite Hero</label>
    <select class="form-select" aria-label="Default select example" id="superhero" disabled>
    </select>
</div>

With the onchange attribute, we can specify a JavaScript function (teamSelected) to be executed whenever the value of the select element changes. We've also disabled the second drop-down list, as its options will be dynamically created based on the selection on the first list.

Dynamic Options

To create an array of superheroes for each team, we can define the arrays inside the script tag. Here's an example:

<script>
  const avengers = ['Iron Man', 'Captain America', 'Thor', 'Hulk', 'Black Widow', 'Hawkeye'];
  const justiceLeague = ['Superman', 'Batman', 'Wonder Woman', 'Flash', 'Aquaman', 'Cyborg'];
</script>
<script>
  const avengers = ['Iron Man', 'Captain America', 'Thor', 'Hulk', 'Black Widow', 'Hawkeye'];
  const justiceLeague = ['Superman', 'Batman', 'Wonder Woman', 'Flash', 'Aquaman', 'Cyborg'];
</script>

In this example, we've defined two arrays, avengers and justiceLeague, that contain the names of the superheroes for each team.

Next, we define the teamSelected() function, which will be called whenever the value of the team select element changes.

function teamSelected(team) {
    alert(team);
}
function teamSelected(team) {
    alert(team);
}

Here, we use an alert dialog box to display the selected value.

Next, we obtain a reference to the second drop-down list. The last line basically clears all the options in the second drop-down list.

var superheroElem = document.getElementById("superhero");
superheroElem.options.length = 0;
var superheroElem = document.getElementById("superhero");
superheroElem.options.length = 0;

Then, based on the option selected, we will populate data to the second select element accordingly. We need a conditional statement (if) here.

if (team == "Avengers") {
    
    for (var hero of avengers) {
        var option = document.createElement("option");
        option.text = hero;
        option.value = hero;
        superheroElem.add(option);
    }

    superheroElem.disabled = false;

} else if (team == "JLA") {
    
    for (var hero of justiceLeague) {
        var option = document.createElement("option");
        option.text = hero;
        option.value = hero;
        superheroElem.add(option);
    }

    superheroElem.disabled = false;

} else {

    superheroElem.disabled = true;
}
if (team == "Avengers") {
    
    for (var hero of avengers) {
        var option = document.createElement("option");
        option.text = hero;
        option.value = hero;
        superheroElem.add(option);
    }

    superheroElem.disabled = false;

} else if (team == "JLA") {
    
    for (var hero of justiceLeague) {
        var option = document.createElement("option");
        option.text = hero;
        option.value = hero;
        superheroElem.add(option);
    }

    superheroElem.disabled = false;

} else {

    superheroElem.disabled = true;
}

Here, when the user picks either Avengers or Justice League, the second select element would be enabled with superheroElem.disabled = false.

Screenshot 2022-08-14 at 2.54.41 PM.png

Once you are satisfied with your code, you can create a zip file of the lab02 folder and submit it to BUmoodle.

24/01/2024 10:34